<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>AngularJS+flex弹性盒</title>
		<link href="../org/bootstrap.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../org/font-awesome-4.6.3/Font-Awesome-master/css/font-awesome.min.css"/>
		<script type="text/javascript" src="../org/angular.min.js" ></script>
		<script src="../org/Underscore.js"></script>
		<style>
			.mobile {
				display: flex;
				border: 1px solid grey;
				height: 500px;
			}
			
			.mobile dl {
				padding: 0;
				margin: 0;
				border: 1px solid #FFFFFF;
				display: flex;
				flex-direction: column-reverse;
				flex: 1;
			}
			
			.mobile dl dt {
				background: grey;
				color: #FFFFFF;
				text-align: center;
				padding: 6px;
			}
			
			.mobile dl dd {
				border: 1px dotted #f3f3f3;
				display: flex;
				flex-direction: column;
			}
			
			.mobile dl dd a {
				padding: 6px;
				text-align: center;
			}
			.fa-top, .fa-sub{
				position: relative;
			}
			.fa-remove{
				position: absolute;
				right: 2px;
				top:2px;
				/*display: none;*/
				color: #999999;
			}
			.fa-top:hover .fa-remove, .fa-sub:hover{
				display: block;
				cursor: pointer;
			}
		</style>
	</head>

	<body>
		<div ng-app="hd" ng-controller="ctrl">
			<div class="container">
				<div class="row">
					<div class="col-xs-4">
						<div class="mobile">
							<dl ng-repeat="v in data.button">
								<dt ng-bind="v.name"></dt>
								<dd ng-repeat="k in v.sub_button">
									<a href="" ng-bind="k.name"></a>

								</dd>
							</dl>

						</div>
					</div>
					<div class="col-xs-8">
						<div class="panel panel-default">
							<div class="panel-heading">编辑</div>
							<div class="panel-body">
								<!--一级菜单开始-->
								<div class="panel panel-default fa-top" ng-repeat="v in data.button">
									<i class="fa fa-remove" ng-click="removeTopMenu(v)"></i>
									<div class="panel-body">
										<form class="form-horizontal" role="form">
											<div class="form-group">
												<label for="firstname" class="col-sm-2 control-label">标题</label>
												<div class="col-sm-10">
													<input type="text" class="form-control" ng-model="v.name">
												</div>
											</div>
											<div class="form-group" ng-if="!v.sub_button.length>0">
												<label for="firstname" class="col-sm-2 control-label">类型</label>
												<label class="radio-inline">
                                                    <input type="radio" name="optionsRadiosinline" ng-model="v.type" value="click" checked> click
                                                </label>
												<label class="radio-inline">
                                                    <input type="radio" name="optionsRadiosinline" ng-model="v.type" value="view"> url
                                                </label>
											</div>
											<div class="form-group" ng-if="v.type=='click' && !v.sub_button.length>0">
												<label for="firstname" class="col-sm-2 control-label" >click</label>
												<div class="col-sm-10">
													<input type="text" class="form-control" ng-model="v.key">
												</div>
											</div>
											<div class="form-group" ng-if="v.type=='view' && !v.sub_button.length>0">
												<label for="firstname" class="col-sm-2 control-label">url</label>
												<div class="col-sm-10">
													<input type="text" class="form-control" ng-model="v.url">
												</div>
											</div>
										</form>
										<!--二级菜单开始-->
										<div class="panel panel-default fa-sub" ng-repeat="k in v.sub_button">
										    <i class="fa fa-remove" ng-click="removeSubMenu(v,k)"></i>
											<div class="panel-body">
												<form class="form-horizontal" role="form">
													<div class="form-group">
														<label for="firstname" class="col-sm-2 control-label">标题</label>
														<div class="col-sm-10">
															<input type="text" class="form-control" ng-model="k.name">
														</div>
													</div>
													<div class="form-group">
														<label for="firstname" class="col-sm-2 control-label">类型</label>
														<label class="radio-inline">
                                                            <input type="radio" name="optionsRadiosinline" value="click" ng-model="k.type"> click
                                                        </label>
														<label class="radio-inline">
                                                            <input type="radio" name="optionsRadiosinline" value="view" ng-model="k.type"> url
                                                        </label>
													</div>
													<div class="form-group" ng-if="k.type=='click'">
														<label for="firstname" class="col-sm-2 control-label">click</label>
														<div class="col-sm-10">
															<input type="text" class="form-control" ng-model="k.key">
														</div>
													</div>
													<div class="form-group" ng-if="k.type=='view'">
														<label for="firstname" class="col-sm-2 control-label">url</label>
														<div class="col-sm-10">
															<input type="text" class="form-control" ng-model="k.url">
														</div>
													</div>
												</form>
											</div>
										</div>
										<!--二级菜单结束-->
										<button type="button" class="btn btn-info" ng-click="addSecondMenu(v)">添加二级菜单</button>
									</div>
								</div>

								<!--一级菜单结束-->
								<button type="button" class="btn btn-primary" ng-click="addFirstMenu()">添加一级菜单</button>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script>
			var m = angular.module('hd', []);
			m.controller('ctrl', ['$scope', function($scope) {
//				添加一级菜单
				$scope.addFirstMenu = function(){
					if($scope.data.button.length<3){
						var menu = {
						"type": "click",
						"name": "K歌之王",
						"key": "KEY_SYBCSDSH"
					    }
					    $scope.data.button.push(menu);
					}else{
						alert("一级菜单最多为三个");
					}
				}
//				添加二级菜单
				$scope.addSecondMenu = function(item){
					if(!item.sub_button){
						item.sub_button = [];
					}
						if(item.sub_button.length<5){
						var menu = {
						"type": "click",
						"name": "song",
						"key": "DEZGJ_VHDSK"
					    }
					    item.sub_button.push(menu);
					}else{
						alert("二级菜单最多为五个");
					}
				}
				//删除一级菜单
				$scope.removeTopMenu = function(item){
					$scope.data.button = _.without($scope.data.button,item);
				}
				//删除二级菜单
				$scope.removeSubMenu = function(v,item){
					v.sub_button = _.without(v.sub_button,item)
				}
				$scope.data = {
					"button": [{
						"type": "click",
						"name": "今日歌曲",
						"key": "V1001_TODAY_MUSIC"
					}, {
						"name": "菜单",
						"sub_button": [{
							"type": "view",
							"name": "搜索",
							"url": "http://www.soso.com/"
						}, {
							"type": "view",
							"name": "wxa",
							"url": "http://mp.weixin.qq.com"
						}, {
							"type": "click",
							"name": "赞一下我们",
							"key": "V1001_GOOD"
						}]
					}]
				}
				
			}]);
		</script>
	</body>

</html>